<template>
	<view class="mask">
		<smh-time-range v-if='showStart' :time='time' @confrim='confirms' @cancel='cancel'
			style='position: fixed;bottom:50rpx'></smh-time-range>
		<view class="content">

			<view class="header">
				身体症状
			</view>
			<view class="content-main">
				<!-- 	<view>
					<u-datetime-picker :show="show" v-model="value1" mode="datetime"></u-datetime-picker>
					<u-button @click="show = true">打开</u-button>
				</view> -->
				<view class="timer-picker" style="margin:18rpx 0 0 12rpx">
					<view class="start" @click="showStart=true" style='display:flex;font-size:40rpx'>
						选择时间：
						<view class="" style='display:flex;margin-left:10rpx;aligin-items:center'>
							<image style="width: 38rpx;height: 38rpx;margin-top:8rpx"
								src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/calendar.png" mode="">
							</image>
							<text style='margin-left:10rpx'>{{startTimer}}</text>
						</view>
					</view>
					<!-- 	<view class="end" @click="showEnd=true" style="margin-top:15rpx;display:flex;align-items:center">
						结束时间：<view class="" style='display:flex;margin-left:10rpx;aligin-items:center'>
							<image style="width: 30rpx;height: 30rpx;"
								src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/calendar.png" mode="">
							</image>
							<text style='margin-left:10rpx'>{{endTimer}}</text>
						</view>
					</view> -->
					<!-- <u-picker mode="time" v-model="showStart" :params="params" @confirm='confirmStart'></u-picker>
					<u-picker mode="time" v-model="showEnd" :params="params" @confirm='confirmEnd'></u-picker> -->
				</view>

				<!-- 	   <u-datetime-picker
		                :show="show"
		                v-model="value1"
		                mode="datetime"
		        ></u-datetime-picker> -->
				<view class="symptom-content" style="margin-top:12rpx">
					<view class="symptom-top" style="font-size:40rpx">
						症状描述
					</view>
					<view class="list-content">
						<!-- <view class="list" @click="changeActiveList(item)" v-for='(item,idx) in symptomList' :key='idx'
							:class="{'active-list':item.id===activeNavId}">
							{{item.title}}
						</view> -->
						<view class="" style='margin-top:12rpx;width:100%;display:flex;flex-wrap:wrap'>
							<!-- <u-checkbox-group @change="checkboxGroupChange">
								<u-checkbox @change="checkBoxChange" v-model="item.checked"
									v-for="(item, index) in list" :key="index" :name="item.name">{{item.name}}
								</u-checkbox>
							</u-checkbox-group> -->
							<view :class="choosedSym.includes(item.name)?'active-sym':'' " @click='chooseSym(item)'
								v-for="(item, index) in list" style='margin:12rpx 0 0 38rpx;width: 100rpx;height: 60rpx;padding: 8rpx 16rpx;text-align: center;line-height: 50rpx;border-radius: 4rpx;background: #eaf2ff;color:#999;font-size:34rpx' :key="index" :name="item.name">
								{{item.name}}
							</view>
							<!-- <u-button @click="checkedAll">全选</u-button> -->
						</view>
						<view class="" style='margin-top:12rpx;width:100%;display:flex;flex-wrap:wrap;margin-top:10rpx'>
							<view class="" v-for="(item, index) in choosedSym" :key='index' style='margin:12rpx 0 0 38rpx;font-size:34rpx;width: 100rpx;height: 60rpx;padding: 8rpx 16rpx;text-align: center;line-height: 50rpx;border-radius: 4rpx;background: #007AFF;#;color:#fff'>
								{{item}}
							</view>
						</view>
				<!-- 		<view style='display:flex;font-size:40rpx;align-items: center;margin-top:18rpx;'>
							<text>其它症状</text>
							<input type="text" value="" placeholder="请输入" style='text-align:left;width:500rpx;border:1px solid #f1f1f1;padding:5px' require
								v-model="otherSymptom" />
						</view> -->
					</view>
					<view class="btn-container" style="font-size: 38rpx;">
						<view class="cancel-btn" @click='cancelBack'>
							取消
						</view>
						<view class="confirm-btn" @click="confirmBack">
							提交
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date:'',
				choosedSym: [],
				time: ['12', '30', '0', '17', '30'],
				otherSymptom: '',
				checkboxValue: [],
				// 基本案列数据
				list: [{
						name: '发烧',
						checked: false,
						disabled: false
					},
					{
						name: '咳嗽',
						checked: false,
						disabled: false
					},
					{
						name: '腹泻',
						checked: false,
						disabled: false
					},
					{
						name: '积食',
						checked: false,
						disabled: false
					},
					{
						name: '呕吐',
						checked: false,
						disabled: false
					},
					{
						name: '便秘',
						checked: false,
						disabled: false
					}
				],
				checked: [],
				value1: Number(new Date()),
				showStart: false,
				showEnd: false,
				startTimer: '',
				endTimer: '',
				defaultTime: "",
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: false,
					second: false,
					timestamp: false
				},
				showWriteSymptom: false,
				activeNavId: 0,
				symptomList: [{
					id: 0,
					title: '发烧'
				}, {
					id: 1,
					title: '咳嗽'
				}, {
					id: 2,
					title: '腹泻'
				}, {
					id: 3,
					title: '积食'
				}, {
					id: 4,
					title: '呕吐'
				}, {
					id: 5,
					title: '便秘'
				}, {
					id: 6,
					title: '腹胀'
				}, {
					id: 7,
					title: '添加...'
				}],
			}
		},
		mounted() {
		
			let nowH = this.getNow().substring(0, 2)
			let nowM = this.getNow().substring(3, 5)
			let thenH

			if (Number(nowH) >= 10) {
				thenH = Number(nowH) - 2
				console.log(thenH, 11)
			} else {
				let h = nowH.substring(1, 2)
				if (Number(h) >= 2) {
					thenH = Number(h) - 2
				} else {
					thenH = 0
				}
			}
			if (thenH < 10) {
				thenH = '0' + thenH
			}
			this.time = [`${thenH}`, `${nowM}`, '0', `${nowH}`, `${nowM}`]
		},
		methods: {
			chooseSym(item) {
				if (this.choosedSym.length) {
					if (this.choosedSym.includes(item.name)) {
						this.choosedSym.forEach((ele, i) => {
							if (ele === item.name) {
								this.choosedSym.splice(i, 1)
							}
						})
					} else {
						this.choosedSym.push(item.name)
					}
				} else {
					this.choosedSym.push(item.name)
				}
			},
			checkBoxChange(e) {
				console.log(e, 222)
			},
			checkboxGroupChange(e) {
				console.log(e, 11);
				this.checkboxValue = e
			},
			yesterDay() {
				var myDate = new Date();
				var year = myDate.getFullYear(); //获取当前年
				var mon = myDate.getMonth() + 1; //获取当前月
				if (mon < 10) {
					mon = "0" + mon;
				}
				var date = myDate.getDate(); //获取当前日
				if (date < 10) {
					date = "0" + date;
				}
				var hours = myDate.getHours(); //获取当前小时
				if (hours < 10) {
					hours = "0" + hours;
				}
				var minutes = myDate.getMinutes(); //获取当前分钟
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				var seconds = myDate.getSeconds(); //获取当前秒
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				let dates = year + "-" + mon + "-" + date + "";
				return dates

			},
			getNow() {
				var myDate = new Date();
				var hours = myDate.getHours(); //获取当前小时
				if (hours < 10) {
					hours = "0" + hours;
				}
				var minutes = myDate.getMinutes(); //获取当前分钟
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				let now = hours + '-' + minutes
				return now
			},
			async addSymptom() {
				let symptom = this.choosedSym
				if (this.otherSymptom) {
					symptom.push(this.otherSymptom)
				}
				let tpl_param = {
					// date: '2022-04-07',
					start: this.date + ' ' + this.startTimer.substring(0, 5),
					end: this.date + ' ' + this.startTimer.substring(6),
					symptom: symptom.join()
				};
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let res = await this.$api.symptomSave(tpl_param);

				if (res.code == 200) {
					uni.navigateTo({
						url: '../symptom/symptom'
					});
					uni.showToast({
						title: res.message || '添加失败'
					});
				} else {
					uni.showToast({
						title: res.message || '添加失败'
					});
				}
				uni.hideLgoading();
			},
			changeActiveList(item) {
				console.log(item, 88)
				this.activeNavId = item.id
			},
			confirmStart(params) {
				this.startTimer = `${params.year}-${params.month}-${params.day}-${params.hour}`

			},
			confirmEnd(params) {
				this.endTimer = `${params.year}-${params.month}-${params.day}-${params.hour}`

			},
			cancelBack() {
				// uni.navigateTo({
				// 	url: '/pages/index/histroy/HistroyData'
				// });
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1]
				let prevPage = pages[pages.length - 2]
				
				uni.navigateBack({
					delta:prevPage
				})
			},

			confirms(e) {
				console.log(e, 151)
				this.startTimer = e.time
				this.showStart = false
			},
			cancel(e) {
				console.log(e, 11)
				this.showStart = false
			},
			confirmBack() {
				if (!this.startTimer) {
					uni.showToast({
						title: '请选择时间'
					})
					return
				}
				// if (!this.endTimer) {
				// 	uni.showToast({
				// 		title: '请选择结束时间'
				// 	})
				// 	return
				// }
				if (!this.choosedSym.length&&!this.otherSymptom) {
					uni.showToast({
						title: '无症状！'
					})
					return
				}
				this.addSymptom()
				// uni.navigateTo({
				// 	url: '/pages/index/histroy/HistroyData'
				// });
			}
		},
		// 获取系统默认时间
		onLoad(query) {
			console.log(query,898)
			if(query.date){
				this.date = query.date
			}
		}

	}
</script>

<style scoped lang='scss'>
	.view-sym {
		width: 100rpx;
		height: 60rpx;
		padding: 8rpx 16rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 4rpx;
		background: #eaf2ff;
		color: #999;
	}

	.active-sym {
		background: #007AFF !important;
		color: #fff !important;
	}

	.admin-join {
		border-bottom: rgb(238, 238, 238) solid 1rpx;
		font-size: 36rpx;
		padding: 30rpx;
		padding-top: 50rpx;
		position: relative;
		font-weight: bold;
	}

	.mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 0 16rpx;
		position: absolute;
		box-sizing: border-box;
		z-index: 3333;
		font-size: 28rpx;
		.content {
			height: 790rpx;
			width: 100%;
			border-radius: 8rpx;
			background-color: #fff;
			margin-top: 35%;

			.header {
				width: 100%;
				height: 80rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
				font-size: 18px;
				font-weight: bold;
				background: #3370ff;
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
			}

			.content-main {
				width: 100%;
				padding: 22rpx;
				box-sizing: border-box;

				.symptom-content {
					width: 100%;
					margin-top: 20rpx;

					.symptom-top {
						color: #3370ff;
						border-left: 5px solid #007AFF;
						padding-left: 10rpx;
					}

					.list-content {
						display: flex;
						width: 100%;
						flex-wrap: wrap;

						.list {
							min-width: 80rpx;
							margin: 12rpx 28rpx;
							padding: 5px 22rpx;
							box-sizing: border-box;
							background: #f1f1f1;
							border-radius: 6rpx;

							&.active-list {
								background: #3370ff !important;
								color: #fff !important;
							}
						}

					}

					.btn-container {
						width: 100%;
						padding: 60rpx 20%;
						box-sizing: border-box;

						.cancel-btn {
							width: 100%;
							text-align: center;
							line-height: 58rpx;
							height: 58rpx;
							border: 1rpx solid #999;
							border-radius: 8rpx;
						}

						.confirm-btn {
							margin-top: 30rpx;
							width: 100%;
							text-align: center;
							line-height: 58rpx;
							height: 58rpx;
							color: #fff;
							background: #3370ff;
							border-radius: 8rpx;
						}
					}
				}
			}
		}
	}
</style>
